<!DOCTYPE html>
<! -----------------------------------------------------------------------
 * Programmer:   Cody Hazelwood
 * Date:         December 5, 2012
 * Platform:     HTML5/Web
 * Dependencies: Browser WebSocket Support
 *               WebSocketTest.js
 *               JQuery
 * -----------------------------------------------------------------------
 * Description:  HTML5 Client Front End for HB-Notify -
 *               Allows the client user to connect to the WebSocket server
 *               and view the connection status and the most recently
 *               received JSON message.                    
-->

<html>
    <head>
        <meta charset="utf-8">
        <title>WebSocket Test</title>

        <style>
            *             { font-family:verdana; font-size:11px; }
            body          { background-color: white; }
            #head         { width:480px; margin-left:auto; margin-right:auto; height:60px; 
                            border-radius:5px; border:3px solid; border-color:gray; padding:5px; 
                            background-color:lightgray; }
            #input        { border-radius:3px; border:1px solid; padding:5px; width:200px; 
                            margin-right: 10px; }
            #status       { float:left; margin-top:12px; margin-left:10px; }
            #message      {  }
            #messages     { width:500px; position:relative; margin-top:10px; 
                            margin-left:auto; margin-right:auto; }
            #msg_info     { position:relative; float:center; background:lightgray; border:3px solid;
                            border-radius:5px; border-color:gray; width:475px; padding:10px; 
                            height:300px; overflow:scroll; overflow-x:hidden; }
            #clients      { margin-left:20px; }
        </style>
    </head>

    <body>
        <div id="head">
            <input type="text" id="input" />
            <input type="button" id="button" value="Connect" onclick="connect();" />
            <span id="status">Please enter the Server IP address.</span>        
        </div>

        <div id="messages">
            <div>
                <span id="info_label">Received Messages:</span>
            </div>          
            <div id="msg_info"></div>
        </div>

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="WebSocketTest.js"></script>
    </body>
</html>